<script setup lang="ts">
  import AppPageHeader from '@/components/common/app/AppPageHeader.vue';
  import UserinfoPane from '@/components/profile/UserinfoPane.vue';
  import UpdatePasswordForm from '@/components/form/UpdatePasswordForm.vue';
  import UploadAvatar from '@/components/profile/UploadAvatar.vue';
  import { useLocale } from '@/locales/useLocale';
  const { t } = useLocale();
</script>

<template>
  <AppPageHeader :content="t('message.sys.userDropEnum.profile')" />
  <div class="profile-container overflow-hidden">
    <div class="profile-wrap px-2 sm:mx-auto mt-[3%]">
      <div class="border rounded-lg shadow py-2 mb-3 lg:mb-6 flex-justify-items-center -enter-y">
        <el-image src="https://i.chaoxing.com/nervous/images/tongxunlu.png" />
        <span class="text-2xl font-bold">{{ t('message.sys.profile.accountManagement') }}</span>
      </div>
      <div class="border rounded-lg shadow-lg p-8">
        <el-tabs>
          <el-tab-pane>
            <template #label>
              <div class="">{{ t('message.sys.profile.userManagement') }}</div>
            </template>
            <template #default>
              <UserinfoPane />
            </template>
          </el-tab-pane>
          <el-tab-pane>
            <template #label>
              <div class="">{{ t('message.sys.profile.changeAvatar') }}</div>
            </template>
            <template #default>
              <UploadAvatar />
            </template>
          </el-tab-pane>
          <el-tab-pane>
            <template #label>
              <div class="">{{ t('message.sys.profile.passwordManagement') }}</div>
            </template>
            <template #default>
              <div class="py-14 mx-auto sm:w-[80%] md:w-[50%] lg:w-[40%]">
                <UpdatePasswordForm />
              </div>
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
  .profile-container {
    min-height: calc(100vh - 41px);
    .el-tabs__item {
      height: fit-content;
      font-size: inherit;
    }
  }
  .profile-wrap {
    @apply w-full sm:w-[80%] xl:w-[60%];
  }
  .profile-active {
    @apply border-b border-b-2 border-[#409eff];
  }
</style>
